<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分类添加</title>
		<link type="text/css" rel="stylesheet" href="css/tableAndPage.css" />
	</head>
	<body>
		<h1>分类添加</h1>
		<div id="app">
			分类等级:<select v-model="type">
				<option v-bind:value="1">添加一级分类</option>
				<option v-bind:value="2">添加二级分类</option>
				<option v-bind:value="3">添加三级分类</option>
			</select>
			分类名:<input type="text" v-model="name" /><br />
			<div v-if="type==3">
				一级分类:<select v-model="type1" @change="showProTypeId2(type1)">
					<option v-for="item in proType1" v-bind:value="item.id">{{item.name}}</option>
				</select><br>
				<span v-if="type1!=''">
					二级分类:<select v-model="type2">
						<!-- <div v-if="showType2Date!=''"> -->
							<option v-for="item2 in proType2" v-bind:value="item2.id">{{item2.name}}</option>
						<!-- </div> -->
					</select>
				</span>
				<br /><br />
				<button @click="add3()">确认添加</button>
				&nbsp;&nbsp;
				<button @click="back()">取消添加</button>
			</div>
			<div v-if="type==2">
				一级分类:<select v-model="type1" >
					<option v-for="item in proType1" v-bind:value="item.id">{{item.name}}</option>
				</select><br>
				<br /><br />
				<button @click="add2()">确认添加</button>
				&nbsp;&nbsp;
				<button @click="back()">取消添加</button>
			</div>
			<div v-if="type==1">
				<br /><br />
				<button @click="add1()">确认添加</button>
				&nbsp;&nbsp;
				<button @click="back()">取消添加</button>
			</div>
		</div>
	</body>
</html>
<!-- serialNumber -->
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/md5.js"></script>
<script>

	var app = new Vue({
		el:"#app",
		data:{
			proType1:[],
			proType2:[],
			proType3:[],
			type:"0",
			type1: "0",
			type2: "0",
			type3: "0",
			name:"",
		},
		methods:{
			md5Public:async function(objectStr){
				let randomNum = 0;
				//接口拿随机数
				await axios({
					url:"http://localhost:8080/setRedisNum",
					methods:"get"
				}).then(res => {
					// alert("随机数开始");
					console.log("随机数:"+res.data);
					randomNum = res.data;

				})
				//放到header里的参数 时间戳 随机数 加密的字符串
				//时间戳
				var dateStr = new Date();
				dateStr = Date.now();

				//把obj按照key值升序
				let sortObject = function(obj){
					let sorter = function(a,b){
						return obj[a] - obj[b];
					}
					let keys = Object.keys(obj);
					keys.sort(sorter);
					let res = {};
					keys.forEach(key => {
						res[key] = obj[key];
					});
					return res;
				}
				//升序的对象
				var sxStr = sortObject(objectStr);
				//把升序的对象转成字符串
				var jsonStr = "";
				for(let obj in objectStr){
					jsonStr += obj+"="+objectStr[obj]+"&";
				}
				//把最后一个&符号切割了
				jsonStr = jsonStr.substr(0, jsonStr.length - 1);

				//加密字符串
				var str = MD5(jsonStr+randomNum);
				console.log("jsonStr:"+jsonStr);
				console.log("randomNum:"+randomNum);
				// alert("str:"+str);
				await axios({
					url:"http://localhost:8080/returnInterfaceStr",
					methods:"POST",
					params:objectStr,
					headers:{
						"TimeStamp":dateStr,
						"randomNum":randomNum,
						"encryptionStr":str
					}
				}).then(res => {
					console.log(res);
					console.log("后端接受之:"+res.data);
					if( res.data == true ){
						return true;
					}else{
						return false;
					}
				})
				return true;
			},
			showProTypeId1:async function (){
				// alert(2)
				var that = this;
				let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
				if( flag == true ){
					await axios ({
						method: 'post',
						url:"http://localhost:8080/getProductTypes",
						headers: { 'content-type': 'application/x-www-form-urlencoded' },
						data:{
							typeId:1,
						}
					}).then(function (response) {
						console.log(response.data.data)
						that.proType1=response.data.data;
						// console.log(that.proType1);
					})
				}
			},
			showProTypeId2:async function(parentId){
				var that = this;
				let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
				if( flag == true ){
					await axios({
						method: 'post',
						url:"http://localhost:8080/getProductTypes",
						headers: { 'content-type': 'application/x-www-form-urlencoded' },
						data:{
							typeId:2,
							parentId:parentId,
						}
					}).then(function (response) {
						console.log(response.data.data);
						that.proType2=response.data.data;
					})
				}
			},
			add1:async function(){
				if(this.name==''){
					alert("分类名不能为空");
					return;
				}
				var that = this;
				let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
				if( flag == true ){
					await axios({
						method:'post',
						url:"http://localhost:8080/addProductType",
						headers: { 'content-type': 'application/x-www-form-urlencoded' },
						data:{
							parentId: 0,
							type: 1,
							name:that.name,
						}
					}).then(function (response) {
						console.log(response.data.data);
						if(response.data.data){
							alert("增加成功")
							window.location="typeList.html"
						}
					})
				}

			},
			add2:async function(){
				if(this.name==''){
					alert("分类名不能为空");
					return;
				}
				if(this.type1=='0'){
					alert("一级类型不能为空")
				}
				var that = this;
				let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
				if( flag == true ){
					await axios({
						method:'post',
						url:"http://localhost:8080/addProductType",
						headers: { 'content-type': 'application/x-www-form-urlencoded' },
						data:{
							parentId: that.type1,
							type: 2,
							name:that.name,
						}
					}).then(function (response) {
						console.log(response.data.data);
						if(response.data.data){
							alert("增加成功")
							window.location="typeList.html"

						}
					})
				}

			},
			add3:async function(){
				if(this.name==''){
					alert("分类名不能为空");
					return;
				}
				if(this.type1=='0'){
					alert("一级类型不能为空")
				}
				if(this.type2=='0'){
					alert("二级类型不能为空")
				}
				var that = this;
				let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
				if( flag == true ){
					await axios({
						method:'post',
						url:"http://localhost:8080/addProductType",
						headers: { 'content-type': 'application/x-www-form-urlencoded' },
						data:{
							parentId: that.type2,
							type: 3,
							name:that.name,
						}
					}).then(function (response) {
						console.log(response.data.data);
						if(response.data.data){
							alert("增加成功")
							window.location="typeList.html"

						}
					})
				}

			},
			back:function () {
				window.location="typeList.html"

			}

		},
		created(){
			// alert(1);
			this.showProTypeId1(0);
		}
	})


</script>
